<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios前后端调用</title>
	</head>
	<body>
		<h1>Ajax请求练习</h1>
		<script src="../js/axios.js"></script>
		<script>
			/*需求1：查询id=1的用户
			方式1：动态拼接参数的写法
			url:http://localhost:8080/axios/getUserById?id=1
			*/
		   let url1 = "http://localhost:8080/axios/getUserById?id=1"
		   axios.get(url1).then(promise => {
			   console.log(promise.data)
		   })
		   
		   /*
		     方式2：利用restFul查询数据
			 需求：查询sex="女"，age>18
			 
			 原因：restFul结构越来越受欢迎，则拼接restFul结构 变得繁琐
			 模板字符串：
				语法：一对反引号``
				取值：${key} 形式取值
				优势：保留代码的格式
		   */
		  let sex2 = "女"
		  let age2 = 18
		  // let url2 = "http://localhost:8080/axios/user/" + sex2 + "/" + age2 太low了，不用这种写法
		  let url2 = `http://localhost:8080/axios/user/${sex2}/${age2}`
		  axios.get(url2).then(promise => {
			  console.log(promise.data)
		  })
		  
		  /*
		  Get 方式3：利用对象实现参数传递
		  需求3：查询name="王昭君" sex="女" age=19
		  参数语法：
			数据结构： {}
			关键字key(固定写法): params
			value: 用户需要传递的值
		  */
		 let user = {
			 name: '王昭君',
			 sex: '女',
			 age: 19
		 }
		 let url3 = "http://localhost:8080/axios/getUser"
		 axios.get(url3,{params:user})
				.then(promise => {
					console.log(promise.data)
				})
		 
		</script>
	</body>
</html>